<template>
  <div>
    <chart-time
      :chart-data="chartData"
      :chart-item="chartItem"
      :show-title="showTitle"
      :show-chart-type="currentChart"
      v-if="currentChart.chartType == 0"
      @onCycleChange="eventCycleChange"
      @onDateChange="eventDateChange"
    ></chart-time>
    <chart-stacked
      :chart-data="chartData"
      :chart-item="chartItem"
      :show-title="showTitle"
      :show-chart-type="currentChart"
      v-if="currentChart.chartType == 1"
      @onCycleChange="eventCycleChange"
      @onDateChange="eventDateChange"
    ></chart-stacked>
    <chart-line
      :chart-data="chartData"
      :chart-item="chartItem"
      :show-title="showTitle"
      :show-chart-type="currentChart"
      v-if="currentChart.chartType == 2"
      @onCycleChange="eventCycleChange"
      @onDateChange="eventDateChange"
    ></chart-line>
    <chart-bar
      :chart-data="chartData"
      :chart-item="chartItem"
      :show-title="showTitle"
      :show-chart-type="currentChart"
      v-if="currentChart.chartType == 3"
      @onCycleChange="eventCycleChange"
      @onDateChange="eventDateChange"
    ></chart-bar>
    <chart-pie
      :chart-data="chartData"
      :chart-item="chartItem"
      :show-title="showTitle"
      :show-chart-type="currentChart"
      v-if="currentChart.chartType == 4"
      @onCycleChange="eventCycleChange"
      @onDateChange="eventDateChange"
    ></chart-pie>
  </div>
</template>
<script>
import ChartTime from "./ChartTime";
import ChartStacked from "./ChartStacked";
import ChartBar from "./ChartBar";
import ChartLine from "./ChartLine";
import ChartPie from "./ChartPie";
import DataAnalysisDao from "@/daos/data_analysis_dao";

import dayjs from "dayjs";

export default {
  name: "chart",
  data() {
    return {
      dayjs,
      autoRefresh: false, // 实时刷新
      autoRefreshTime: 10, // 实时刷新时间s
      currentChartIndex: 0,
      timeInterval: null,
      startTime: null,
      endTime: null,
      chartData: {
        // source: [
        //   ["product", "正常", "停止", "故障],
        //   ["1月", 88.3, 65.8, 34.7],
        //   ["2月", 83.1, 73.4, 55.1],
        //   ["3月", 86.4, 65.2, 35.5],
        //   ["4月", 72.4, 53.9, 39.1],
        //   ["5月", 87.4, 53.9, 39.1],
        //   ["6月", 92.4, 53.9, 39.1],
        //   ["7月", 87.4, 53.9, 39.1],
        //   ["8月", 99.4, 53.9, 39.1],
        //   ["9月", 78.4, 53.9, 39.1],
        //   ["10月", 86.4, 53.9, 39.1],
        //   ["11月", 92.4, 53.9, 39.1],
        //   ["12月", 97.4, 53.9, 39.1]
        // ]
      }
    };
  },
  props: {
    chartItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    code: {
      type: String,
      default: ""
    },
    departmentId: {
      type: String,
      default: ""
    }
  },
  components: {
    ChartTime,
    ChartStacked,
    ChartBar,
    ChartLine,
    ChartPie
  },
  computed: {
    charts() {
      return this.chartItem.charts || [];
    },
    currentChart() {
      // 图表类型 0:时段图,1:堆叠柱状图,2折线图,3柱状图,4环形图
      return this.charts[this.currentChartIndex] || {};
    }
  },
  created() {
    this.initDate(this.currentChart.cycleType);
  },
  mounted() {
    this.renderChart();
  },
  beforeDestroy() {
    this.handleLiveUpdataRemove();
  },
  methods: {
    initDate(cycleType) {
      let startTime = null,
        endTime = null;
      if (cycleType === 1) {
        startTime = this.dayjs().subtract(1, "day");
        endTime = this.dayjs();
      } else if (cycleType === 2) {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      } else if (cycleType === 3) {
        startTime = this.dayjs().subtract(1, "year");
        endTime = this.dayjs();
      } else if (cycleType === 4) {
        startTime = this.dayjs()
          .startOf("year")
          .subtract(7, "year");
        endTime = this.dayjs()
          .startOf("year")
          .add(1, "year");
      } else if (cycleType === 0) {
        startTime = this.dayjs().subtract(1, "hour");
        endTime = this.dayjs();
      } else if (cycleType === 5) {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      } else {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      }
      this.startTime = startTime;
      this.endTime = endTime;
      return { startTime, endTime };
    },
    eventDateChange(date) {
      console.log("eventDateChange");
      this.startTime = date.startTime;
      this.endTime = date.endTime;
      this.getChartDataList();
    },
    eventCycleChange(index, date) {
      console.log("eventCycleChange");
      // console.log(index);
      this.currentChartIndex = index;
      this.startTime = date.startTime;
      this.endTime = date.endTime;
      // this.getChartDataList(this.currentChart);
      if (this.currentChart.cycleType === 0) {
        this.handleLiveUpdataSet();
      } else {
        this.handleLiveUpdataRemove();
      }
      this.getChartDataList();
    },
    renderChart() {
      if (this.currentChart.cycleType === 0) {
        this.autoRefresh = true;
        // this.autoRefreshTime = this.config.autoRefreshTime || 10;
        this.handleLiveUpdataSet();
      }
      this.getChartDataList();
    },
    handleLiveUpdataSet() {
      clearInterval(this.timeInterval);
      this.timeInterval = setInterval(() => {
        this.initDate(this.currentChart.cycleType);
        this.getChartDataList();
        // if (this.showFullscreen) {
        //   this.fullscreenChartUpdate();
        // }
      }, this.autoRefreshTime * 1000);
    },
    handleLiveUpdataRemove() {
      clearInterval(this.timeInterval);
    },
    getChartDataList() {
      let params = {
        dataCodes: this.chartItem.dataCode,
        code: this.code,
        departmentId: this.departmentId,
        chartType: this.currentChart.chartType,
        cycleType: this.currentChart.cycleType,
        veidoo: this.currentChart.veidoo,
        conditionValue: this.currentChart.conditionValue,
        endTime: this.endTime.format(),
        startTime: this.startTime.format()
      };
      DataAnalysisDao.getChartData(params, res => {
        this.chartData = res || {};
      });
    }
  }
};
</script>
<style lang="less" scope>
.showPie {
  width: 100%;
  margin-bottom: 12px;
  padding: 6px 0;
  background-color: #1f2037;
  position: relative;
  .show-title {
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 0 16px;
    .show-btn {
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
  &.show {
    padding-bottom: 12px;
  }
  .charts-wrapper {
    // height: 300px;
    height: auto;
    padding: 4px 0;
  }
  .chart-area {
    height: 300px;
    margin: 0 16px;
    background-color: #292a4d;
  }
  .chart-empty {
    position: absolute;
    display: block;
    width: 84px;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100%;
    }
    p {
      text-align: center;
      color: #9ec6fb;
      font-size: 13px;
    }
  }
  .charts-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: #fff;
    margin-top: 6px;
    padding: 0 8px;
  }
}

.charts-date-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 16px;
  font-size: 14px;
  user-select: none;
  color: #fff;
  .pagination-item,
  .pagination-text {
    background-color: #292a4d;
    border-radius: 2px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pagination-text {
    flex: 1;
    text-align: center;
    margin: 0 2px;
  }
  .pagination-item {
    width: 30px;
  }
}
.day-charts {
  color: #fff;
  font-size: 16px;
}
.day-charts-time {
  margin: 12px 16px;
  padding: 8px 0;
  background-color: #292a4d;
}
.day-charts-tip {
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
  padding: 0 8px;
  span {
    margin-left: 20px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 5px;
      left: -10px;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background-color: #fff;
    }
    &.fault::before {
      background-color: #dd6031;
    }
    &.stop::before {
      background-color: #dc9610;
    }
    &.run::before {
      background-color: #456de5;
    }
    &.offline::before {
      background-color: #d2d2d2;
    }
  }
}
.day-charts-area {
  padding: 0 0 8px;
  margin-top: 16px;
}
.chart-cycle-list {
  margin: 6px 16px 12px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  border: 1px solid #456de6;
  border-radius: 2px;
  .list-item {
    padding: 4px;
    text-align: center;
    color: #456de6;
    flex: 1;
    &.active {
      color: #fff;
      background-color: #456de6;
    }
  }
}
.day-charts-bottom {
  margin-top: 2px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.day-charts-history {
  text-align: center;
  font-size: 14px;
  padding: 8px;
}
.day-charts-body {
  display: flex;
  height: 16px;
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  margin: 0 8px;
  .day-charts-item {
    position: absolute;
    top: 0;
    bottom: -1px;
    &.offline {
      background-color: #d2d2d2;
    }
    &.run {
      background-color: #456de5;
    }
    &.stop {
      background-color: #dc9610;
    }
    &.fault {
      background-color: #dd6031;
    }
  }
}
</style>
